<template>
  <view style="padding-top: 20upx;">
    <view class="webkit list">
      <view class="title">旧手机号</view>
      <input type="text" v-model="mobile" disabled maxlength="11" class="flex" />
    </view>
    <view class="webkit list">
      <view class="title">新手机号</view>
      <input type="text"  v-model="mobile2" maxlength="11" class="flex" />
    </view>
    <view class="webkit list">
      <view class="title">验证码</view>
      <input type="text" v-model="verifycode" maxlength="5" placeholder="请输入验证码" class="flex" />
      <button class="inputright" type="default" :disabled="codebtn" @click="getcode" v-cloak>{{codetext}}</button>
    </view>
    <view style="padding: 0 24upx;">
      <button type="primary" style="background-color: #EB2E15; margin-top: 20upx;" @click="submit" :loading="loading">确认修改</button>
    </view>
    
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timestamp: '',
        codetext: '获取验证码',
        loading: false,
        codebtn: false,
        codenum: 60,
        mobile: '',
        mobile2: '',
        verifycode: '',
        openid: '',
        rules: {
          mobile2: '请输入新手机号',
          verifycode: '请输入验证码',
        }
      };
    },
    onLoad: function() {
      // uni.showLoading()
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.setAjax()
        },
        fail: () => {
          uni.navigateTo({
            url: '../../login/login'
          });
        }
      });
    },
    methods: {
      setAjax() {
        uni.request({
          url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.bind.edit_mobile&app=1',
          data: {
            openid: uni.getStorageSync('openid')
          },
          success: res => {
            this.mobile = res.data.mobile
          },
          fail: () => {},
          complete: () => {}
        });
      },
      changeImg() {
        var timestamp = (new Date()).getTime();
        this.timestamp = timestamp
      },
      getcode() {
        if (!this.mobile2) {
          return uni.showToast({
            title: '请输入新手机号',
            icon: "none"
          });
        } else {
          uni.request({
            url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.verifycode&app=1',
            method: 'POST',
            data: {
              mobile: this.mobile2,
              temp: 'sms_forget',
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: res => {
              console.log(res)
              uni.showToast({
                title: res.data.result.message,
                icon: "none"
              });
              if (res.data.status == 1) {
                this.codebtn = true
                var codetexts = setInterval(() => {
                  this.codenum = this.codenum - 1
                  this.codetext = this.codenum + 's'
                }, 1000)
                setTimeout(() => {
                  this.codebtn = false
                  clearInterval(codetexts);
                  this.codetext = '重新发送'
                }, 60000)
              }
            },
            fail: () => {},
            complete: () => {}
          });
        }
      },
      submit() {
        for (let item of Object.keys(this.rules)) {
          if (!this[item] || (!this[item] && !this[item].length)) {
            return this.$refs.uToast.show({
            	title: this.rules[item],
            	type: 'error',
            });
          }
        }
        if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.mobile2))) {
          return uni.showToast({
            title: '请输入正确的手机号码',
            icon: "none"
          });
        }
        console.log('修改')
        uni.request({
          url: 'http://hszj.hongshantang696.com//app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=member.bind.edit_mobile_submit&app=1',
          method: 'POST',
          data: {
            newmobile: this.mobile2,
            verifycode: this.verifycode,
            openid: uni.getStorageSync('openid'),
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            console.log('修改', res)
            uni.showToast({
              title: res.data.result.message,
              icon: "none"
            });
            if (res.data.status == 1) {
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/member/member'
                })
              }, 1500)
            }
            


          },
          fail: () => {},
          complete: () => {}
        });
      }
    },
  }
</script>

<style>
  .list {
    padding: 26upx 24upx;
    background: #fff;
    position: relative;
  }

  .list:last-child:after {
    display: none;
  }

  .list:after {
    content: " ";
    position: absolute;
    left: 20upx;
    right: 20upx;
    bottom: -2upx;
    height: 2upx;
    border-top: 2upx solid #ebebeb;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .list .title {
    width: 150upx;
    line-height: 50upx;
    color: #666;
  }

  .list .flex {
    line-height: 50upx;
    color: #666;
    padding-left: 24upx;
  }

  .inputright {
    width: 200upx;
    height: 52upx;
  }

  button.inputright {
    line-height: 48upx;
    font-size: 24upx;
    background: transparent;
    border: 2upx solid #333;
  }
</style>
